<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="wzc">
        <input type="text" v-model="text">
        <ul>
            <li v-for="(p, index) in filterpersons" :key="index">
                {{index}}---{{p.name}}---{{p.age}}
            </li>
        </ul>
        <button @click='setorderType(1)'>年龄升序</button>
        <button @click='setorderType(2)'>年龄降序</button>
        <button @click='setorderType(0)'>原本顺序</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#wzc',
            data: {
                orderType: 0, //0代表原本 1代表升序 2代表降序
                text: '',
                persons: [{
                    name: 'wzc',
                    age: 18
                }, {
                    name: 'aaa',
                    age: 16
                }, {
                    name: 'bbbc',
                    age: 19
                }, {
                    name: 'ccc',
                    age: 10
                }]
            },
            methods: {
                setorderType(a) {
                    this.orderType = a;
                }
            },
            computed: {
                filterpersons() {
                    const {
                        persons,
                        text,
                        orderType
                    } = this;
                    let fpersons = persons.filter(p => p.name.indexOf(text) !== -1)
                    if (orderType != 0) {
                        fpersons.sort(function(p1, p2) { //如果返回负数，p1在前，如果返回正数p2在前
                            if (orderType === 2) {
                                return p2.age - p1.age
                            } else {
                                return p1.age - p2.age
                            }
                        })
                    }
                    return fpersons;
                }
            }
        })
    </script>
</body>

</html>